<template>
  <item-title title="基本信息" />

  <el-form
    :inline="true"
    label-position="right"
    label-width="150px"
    class="form-detail"
  >

    <el-row
      :gutter="20"
      style="width:100%"
    >
      <el-col :span="24">
        <el-form-item label="产品名称：">
          <span v-if="datas.planInfo">{{ getProductName(datas.planInfo) }}</span>
        </el-form-item>
      </el-col>

      <el-col :span="8">
        <el-form-item label="产品属性：">
          <span> {{ getLabel('product_attribute', datas.planInfo?.productAttribute) }}</span>
        </el-form-item>
      </el-col>

      <el-col :span="8">
        <el-form-item label="终端价：">
          <el-link
            :underline="false"
            style="display: flex;align-items: center"
            type="primary"
            @click="priceClick"
          >
            {{ datas.planInfo?.terminalPrice }}元/{{ getLabel('sell_unit', datas.planInfo?.sellUnit) }}
          </el-link>
        </el-form-item>
      </el-col>

      <el-col :span="8">
        <el-form-item label="规划地区：">
          <span v-if="datas.planDetail.provinceName">{{
            datas.planDetail.provinceName
          }}/{{ datas.planDetail.cityName }}/{{ datas.planDetail.areaName }}/{{ datas.planDetail.streetName }}</span>
        </el-form-item>
      </el-col>

      <el-col :span="8">
        <el-form-item label="规划开发终端数量：">
          {{ datas.planDetail?.devTerminalNum }} 家
        </el-form-item>
      </el-col>

      <el-col :span="8">
        <el-form-item label="其他说明：">
          <span v-if="datas.planDetail?.remark">{{ datas.planDetail?.remark }}</span>
          <span v-else>无</span>
        </el-form-item>
      </el-col>

      <el-col :span="8">
        <el-form-item label="招商规划名称：">
          {{ datas.planInfo?.planName }}
        </el-form-item>
      </el-col>

      <el-col :span="8">
        <el-form-item label="市场准入信息：">
          <my-tooltip
            v-if="datas.planInfo?.chanceId"
            :content="datas.planInfo?.chanceName"
            @click="toChance"
          />
          <span v-else>无</span>
        </el-form-item>
      </el-col>

      <el-col :span="8">
        <el-form-item label="创建人：">
          {{ datas.planInfo?.creatorName }}
        </el-form-item>
      </el-col>

      <el-col :span="8">
        <el-form-item label="创建时间：">
          {{ dateFormat('yyyy-mm-dd HH:MM', datas.planInfo?.createdAt) }}
        </el-form-item>
      </el-col>
      <el-col :span="8">
        <el-form-item label="发布时间：">
          <span v-if="datas.planInfo?.putTime">{{ dateFormat('yyyy-mm-dd HH:MM',datas.planInfo?.putTime) }}</span>
          <span v-else>无</span>
        </el-form-item>
      </el-col>
    </el-row>

  </el-form>

  <template v-if="datas.allocationAgent?.id">
    <item-title title="开发跟进信息" />

    <agentView
      :id="datas.planDetail.id"
      :datas="datas"
      :if-have="datas.ifHave"
    />
  </template>

  <detail-drawer
    ref="detailDrawer"
    :size-width="1000"
    custom-title
  >
    <template #title>

      <span>产品终端价 - {{ datas.planInfo.priceNumber }}</span>

    </template>
    <template #contents>

      <terminalPrice :id="datas.planInfo.productPriceId" />

    </template>
  </detail-drawer>

  <!-- 准入详情 -->
  <detail-drawer
    ref="chanceDrawer"
    :size-width="1000"
    custom-title
  >
    <template #title>
      <span>关联市场准入 - {{ datas?.planInfo?.chanceName }}</span>
    </template>
    <template #contents>

      <chance-info :id="datas?.planInfo.chanceId" />

    </template>
  </detail-drawer>

</template>

<script>
import {
  defineAsyncComponent,
  defineComponent,
  reactive,
  toRefs,
  watch,
} from 'vue'

export default defineComponent({
  name: 'DirectDetail',
  components: {
    agentView: defineAsyncComponent(() => import('./agentView.vue')),
    terminalPrice: defineAsyncComponent(() =>
      import('@CRM/views/commonView/detailComponents/product/terminalPrice.vue')
    ),
    chanceInfo: defineAsyncComponent(() =>
      import('@CRM/views/commonView/detailComponents/business/chanceInfo.vue')
    ),
  },
  props: {
    datas: {
      type: Object,
      default: {},
    },
  },
  setup(props, {}) {
    var data = reactive({
      detailDrawer: null,
      chanceDrawer: null,
    })

    const priceClick = () => {
      data.detailDrawer.open()
    }

    const toChance = () => {
      data.chanceDrawer.open()
    }

    return {
      ...toRefs(data),

      priceClick,
      toChance,
    }
  },
})
</script>

<style scoped>
</style>
